<template>
	<view class="wallet-detail">
		<view class="tabs">
			<view class="tabs-item" :class="{active: current === index}" @tap="tabTogger(index)" v-for="(item,index) in items">{{item}}</view>
		</view>
		<view class="content">
			<template v-if="current === 0">
				<uni-list :border="false">
				    <uni-list-item :border="false" title="转出" note="给张三转账成功">
						<view class="footer" slot="footer">
							<view class="money reduce">-100</view>
							<view class="time">2020-05-05 15:00</view>
						</view>
					</uni-list-item>
				    <uni-list-item :border="false" title="充值成功" note="充值可用钱包">
						<view class="footer" slot="footer">
							<view class="money">100</view>
							<view class="time">2020-05-05 15:00</view>
						</view>
					</uni-list-item>
				    <uni-list-item :border="false" title="转出" note="充值可用钱包">
						<view class="footer" slot="footer">
							<view class="money reduce">-100</view>
							<view class="time">2020-05-05 15:00</view>
						</view>
					</uni-list-item>
				    <uni-list-item :border="false" title="充值成功" note="充值可用钱包">
						<view class="footer" slot="footer">
							<view class="money">100</view>
							<view class="time">2020-05-05 15:00</view>
						</view>
					</uni-list-item>
				    <uni-list-item :border="false" title="转出" note="充值可用钱包">
						<view class="footer" slot="footer">
							<view class="money reduce">-100</view>
							<view class="time">2020-05-05 15:00</view>
						</view>
					</uni-list-item>
				</uni-list>
			</template>
			<template v-if="current === 1">
				<uni-list :border="false">
				    <uni-list-item :border="false" title="转出1" note="给张三转账成功">
						<view class="footer" slot="footer">
							<view class="money reduce">-100</view>
							<view class="time">2020-05-05 15:00</view>
						</view>
					</uni-list-item>
				</uni-list>
			</template>
			<template v-if="current === 2">
				<uni-list :border="false">
				    <uni-list-item :border="false" title="转出2" note="给张三转账成功">
						<view class="footer" slot="footer">
							<view class="money reduce">-100</view>
							<view class="time">2020-05-05 15:00</view>
						</view>
					</uni-list-item>
				</uni-list>
			</template>
			<template v-if="current === 3">
				<uni-list :border="false">
				    <uni-list-item :border="false" title="充值成功" note="充值可用钱包">
						<view class="footer" slot="footer">
							<view class="money">100</view>
							<view class="time">2020-05-05 15:00</view>
						</view>
					</uni-list-item>
				</uni-list>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				items: ['本金','质押','动态','静态'],
			}
		},
		onLoad() {
	
		},
		methods: {
			tabTogger(e) {
				this.current = e;
			}
		}
	}
</script>

<style>
	page {
		background-color: #D8D8D8;
	}
	.wallet-detail .tabs {
		display: flex;
		justify-content: space-between;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #1296DB;
		margin-top: -1px;
	}
	.wallet-detail .tabs-item {
		flex: 1;
		position: relative;
		color: #D8D8D8;
	}
	.wallet-detail .tabs-item.active {
		color: #fff;
	}
	.wallet-detail .tabs-item.active::before {
		content: "";
		width: 60rpx;
		height: 8rpx;
		background-color: #fff;
		position: absolute;
		left: 50%;
		bottom: 0rpx;
		transform: translateX(-50%);
	}
	.wallet-detail .content {
		padding: 20rpx 30rpx;
	}
	.wallet-detail .uni-list {
		background-color: #D8D8D8;
	}
	.wallet-detail .uni-list-item {
		margin-bottom: 20rpx;
		border-radius: 10rpx;
	}
	.wallet-detail >>> .uni-list-item__content-note {
		margin-top: 20rpx;
	}
	.wallet-detail .footer {
		text-align: right;
	}
	.wallet-detail .footer .money {
		font-size: 36rpx;
		color: #1296DB;
	}
	.wallet-detail .footer .reduce {
		color: #ff5051;
	}
	.wallet-detail .footer .time {
		margin-top: 10rpx;
		font-size: 26rpx;
		color: #999;
	}
</style>
